<template>
  <!--个人信息侧边栏-->
  <v-navigation-drawer
    v-model="drawer"
    absolute
    fixed
    floating
    :mini-variant.sync="mini"
    class="v-navigation-drawer--fixed top-percent"
    permanent
  >
    <v-list-item>
      <v-list-item-avatar>
        <v-img sizes="srcset" :src="avatar" />
      </v-list-item-avatar>

      <v-list-item-content>
        <v-list-item-title v-text="name" />
      </v-list-item-content>
      <v-btn
        icon
        @click.stop="mini = !mini"
      >
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
    </v-list-item>

    <v-divider />

    <v-list dense>

      <v-list-item
        v-for="draw in leftDraw"
        :key="draw.title"
        link
        @click="smAct(draw)"
      >
        <v-list-item-icon>
          <v-icon>{{ draw.icon }}</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>{{ draw.title }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
import '@/assets/css/business/blog/userDrawer/userDrawer.scss'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'userDrawer',
  data: () => ({
    // drawer
    drawer: null,
    leftDraw: [
      { title: '收藏', icon: 'mdi-heart-box-outline', name: 'collection' },
      { title: '我的博客', icon: 'mdi-blogger', name: 'myblog' },
      { title: '我点赞的', icon: 'mdi-thumb-up-outline', name: 'admire' },
      { title: '个人中心', icon: ' mdi-account-outline', name: 'personal' },
      { title: '退出', icon: 'mdi-exit-to-app', name: 'exit' }
    ],
    mini: true,
    name: '', // 登录用户名
    avatar: '' // 登录用户头像
  }),
  created() {
    this.initUser()
  },
  methods: {
    // 初始化登录用户信息
    initUser() {
      const userInfo = this.$cookie.get('userInfo')
      if (!userInfo) {
        this.clearLogin()
      } else {
        const name = userInfo.name
        const avatar = userInfo.avatar
        this.name = name === '' ? '路人小虾米' : name
        this.avatar = avatar === '' ? 'http://111.231.239.202:8018/data/img/unknownAvatar.png' : avatar
      }
    },
    // 侧边栏菜单所有点击事件
    smAct(draw) {
      const actName = draw.name
      switch (actName) {
        case 'collection' :
          this.$iziToast.warning({ message: '博主时间有限，此功能仍在开发中...' })
          break
        case 'myblog' :
          this.$iziToast.warning({ message: '博主时间有限，此功能仍在开发中...' })
          break
        case 'admire' :
          this.$iziToast.warning({ message: '博主时间有限，此功能仍在开发中...' })
          break
        case 'personal' :
          this.$router.push('/userDetail')
          this.$store.commit('clearMenuNavTab')
          break
        case 'exit' :
          this.logOut()
          break
        default:
          this.$iziToast.warning({ message: '你选的啥？连我都不知道' })
          break
      }
    },
    clearLogin() {
      // 清空 cookie 清空 store中的用户信息和 token信息
      this.$cookie.delete(ACCESS_TOKEN)
      this.$store.commit('clearUserInfo')
      this.$store.commit('setIsLogin', false)
      this.$store.commit('clearMenuNavTab')
      // console.log("用户信息清理结束,即将跳转至首页~");
    },
    // 登出
    logOut() {
      this.clearLogin()
      // 跳转至首页
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>

</style>
